<template>
    <el-container>
        <el-header class='el-header'> 
            <div style="font-size:24px;color:#333333;text-align:left;margin-left:50px;margin-top:35px;">
                实时分析医患对话
            </div>
            <div style="font-size:12px;color:#333333;text-align:left;margin-left:50px;margin-top:4px;">
                点击“开始录制”, 收集医患对话并进行实时分析
            </div>
        </el-header>

        <el-main class="main">
            <div>
                <div style="margin-top:100px;">
                    <Loading style="width:120px;height:120px;margin:auto;"></Loading>
                </div>
                <div> 
                    <el-steps :active="progress" finish-status="success" align-center
                    style="width:600px;margin-left:auto;margin-right:auto;margin-top:40px;text-align: left">
                        <el-step title="语音分割" ></el-step>
                        <el-step title="ASR语音识别" ></el-step>
                        <el-step title="信息抽取"></el-step>
                        <el-step title="结果分析"></el-step>
                    </el-steps>
                </div>
                <div style="display:flex;margin-top:30px;justify-content:center;">
                    <div><i class="el-icon-loading" style="font-size:10px;"></i></div>
                    <div style="color: #606266">{{progress_text}}</div> 
                </div>
                
            </div>
        </el-main>
        <el-footer style="height:22%;background-color:#f3f3f4;">

        </el-footer>
    </el-container>    
</template>

<script>
import axios from 'axios'
import icon_url from '@/assets/icon-2.png'
import finish_icon_path from '@/assets/complete.png'
import {DoubleBounce} from 'vue-loading-spinner'
export default {
    name:"upload",
    components: {
      Loading: DoubleBounce
    },
    data() {
        return {
            name: "上传文件",
            data: undefined,
            checkStatus: "",
            activeTab: 'first',
            iconPath:icon_url,
            finish_icon_path:finish_icon_path,
            loadingbut:false,
            loadingbutText:"点击查看",
            btnIcon:" ",
            progress: 0,
            progress_text: " 正在进行音频切割...",
            text:[" 正在进行音频切割..."," 正在将语音转为文字..."," 正在抽取关键信息..."," 正在进行结果分析..."," 完成"],
            timer: null,
        }
    },
    created() {
        this.getRouterData()
    },
    beforeDestroy(){
        if(this.timer){
            clearInterval(this.timer); 
        }
    },
    methods: {
        getRouterData(){
            console.log(this.progress);
            this.data = this.$route.params.data;
            this.$store.state.panel_data = this.$route.params.data;
            let fileName=this.$store.state.fileName;
            axios.get("http://localhost:8000/dialogue/speech_vad/",{
                headers: {
                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                },
                }).then(res => {
                    this.progress = 1;
                    this.progress_text = this.text[1]
                    axios.get("http://localhost:8000/dialogue/speech_asr_record/").then(res => {
                        console.log(res);
                        var dialogue = res.data.dialogue;
                        this.progress = 2;
                        this.progress_text = this.text[2]
                        axios.post("http://localhost:8000/dialogue/speech_mie_record/",{
                            headers: {
                                'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                            }
                        }).then(res => {
                            this.progress = 3;
                            this.progress_text = this.text[3]
                            console.log(res);
                            var data = res.data.data;
                            var links = res.data.links;
                            var entities = res.data.entities;
                            var relations = res.data.relations;
                            var patient_info = res.data.patient_info;
                            var pred_info = res.data.pred_info;
                            var item = "";
                            for(var i = 0; i<pred_info.length;i++){
                                if(pred_info[i]['category']=='症状'){
                                    item = pred_info[i]["item"][0]["name"];
                                    break;
                                }
                            }
                            var info = {"category": "Symptom", "item": item};
                            axios.post("http://localhost:8000/dialogue/record_analysis/",JSON.stringify(info),{
                                headers: {
                                    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
                                }
                            }).then(res => {
                                this.progress = 4;
                                this.progress_text = this.text[4]
                                var pie_info = res.data;
                                this.$router.push({
                                name:'Record_Analysis',
                                params:{
                                    data: data,
                                    links: links,
                                    entities:entities,
                                    relations:relations,
                                    patient_info:patient_info,
                                    pred_info:pred_info,
                                    pie_info: pie_info,
                                    item: item,
                                }
                                });
                            });
                        });
                    });
                
                });
            
        },
        
    },
}
</script>
<style scoped>
    .el-aside{
        background-color: #2b3a49;
    }
    
    .main{
        background-color: #f3f3f4;
        margin-top:80px;
    }
    .main-container{
        position:absolute;
        height:100%;
        width:100%;
    }
    .card-box{
        margin-top:100px;
    }
    .tab-title{
        color:#fff;
    }

</style>